<template>
	<view class="content" :style="{ paddingTop: topHeight }">
		<view class="dis-flex flex-x-between flex-y-center box">
			<view class="dis-flex flex-y-center">
				<image src="@/static/imgs/back.png" @click="back" color="#252525" style="width: 30rpx;height: 30rpx;">
				</image>
				<text>官宣书</text>
			</view>
			<image class="imgicon" src="/static/imgs/fx.png" mode="widthFix" @click="() => isShare = true" />
		</view>
		<view class="wrap">
			<view class="gz dis-flex flex-x-between flex-y-center">
				<image :src="IMG_URL + article.user.avatar" style="border-radius:50%;width:68rpx;height:68rpx;">
				</image>
				<!-- <image v-else src="/static/imgs/tou.png" style="width:68rpx;" mode="widthFix" /> -->
				<view class="txts flex-box">{{ article.user.username }}</view>
				<view class="tags" v-if="article.is_interest == 1" @click="cancelInterestOne(article.user_id)">已关注
				</view>
				<view class="tags" v-else @click="interest(article.user_id)">关注</view>
			</view>

			<view class="gz">
				<view class="title" v-if="article.type !== 2">{{ article.introduce }}</view>
				<view class="dis-flex flex-y-center tagAll">
					<template v-if="article.type === 0">
						<view class="tag">分享</view>
					</template>
					<template v-else-if="article.type === 1">
						<view class="tag">永久</view>
					</template>
					<template v-else-if="article.type === 2">
						<view class="tag">誓言</view>
					</template>
				</view>
				<view class="swiper" v-if="article.type !== 2 && article.picture">
					<u-swiper :list="pictureArray(article.picture)" :autoplay="false" @change="e => current = e.current"
						height="500">
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in pictureArray(article.picture)"
								:key="index" :class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>
				<view class="swiper" v-else-if="article.type !== 2 && article.video">
					<video :src="IMG_URL + article.video" autoplay="true" style="width: 100%;height: 500px;"></video>
				</view>
				<view class="desc">
					{{ article.details }}
				</view>
				<view class="editime"><text>{{ formatTimestamp(article.createtime) }}</text><text
						v-if="article.is_ip == 0">{{
		article.ip }}</text></view>
				<HallComment :article_id="article.id" :key="commentKey" @reply="doSome"></HallComment>
			</view>
		</view>
		<view class="footer dis-flex flex-y-center">
			<view class="inputWrap">
				<image src="/static/imgs/pub.png" style="width:26rpx;" slot="prefix" mode="widthFix" />
				<text v-if="receivedData.user.username" style="width: 100rpx;white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;">@{{ receivedData.user.username }}</text>
				<input placeholder="说点什么....." shape="circle" v-model="content" />
				<!-- </u-input> -->
			</view>
			<view class="imgWrap flex-box" style="display: flex;
    align-items: center;
    justify-content: flex-start;">
				<image v-if="article.is_like == 1" src='/static/imgs/love_active.png' mode="widthFix"
					@click="cancelLikeOne(article.id)" />
				<image v-else src='/static/imgs/love.png' mode="widthFix" @click="likeOne(article.id)" />
				<image v-if="article.is_step == 1" src="/static/imgs/bad_active.png" mode="widthFix"
					@click="cancelStepArticleOne(article.id)" />
				<image v-else src="/static/imgs/bad.png" mode="widthFix" @click="stepArticleOne(article.id)" />
				<image v-if="article.is_collect == 1" src="/static/imgs/collect_active.png" mode="widthFix"
					@click="cancelCollectOne(article.id)" />
				<image v-else src="/static/imgs/collect.png" mode="widthFix" @click="collectOne(article.id)" />
				<!-- <image src="/static/imgs/comment.png" mode="widthFix" /> -->
				<u-button style="    width: 51px;
    border-radius: 5%;
    margin-left: 2px;
    background-color: rgb(253, 55, 72);
    color: rgb(255, 255, 255);
    height: 25px;
    font-size: 10px;" @click="send(article.id)">发送</u-button>
			</view>
		</view>

		<Share ref="addressWindow" :address='isShare' @changeClose="() => isShare = false" v-if="isShare"
			:article="article">
		</Share>
	</view>
</template>

<script>
	import moment from 'moment';
	import {
		IMG_URL,
	} from "../../config/app.js";
	import {
		detail,
		remarkList,
		interestOne,
		like,
		cancelLike,
		collect,
		cancelCollect,
		stepArticle,
		cancelStepArticle,
		cancelInterest,
		publish
	} from '../../api/hall.js'
	import env from '@/utlis/env.js';
	import Share from '@/components/share'
	import HallComment from '@/components/hall/comment'
	export default {
		components: {
			Share,
			HallComment
		},
		data() {
			return {
				placeholder: '说点什么.....',
				IMG_URL: IMG_URL,
				loading: false,
				isShare: false,
				isLove: 1,
				current: 0,
				imgList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				article_id: '',
				article: {},
				content: '',
				commentKey: 1,
				receivedData: {
					user: {
						username: ''
					}
				}
			}
		},
		onLoad(option) {
			this.getdetail(option.id);
			// console.log(option.id, '22222');
			this.article_id = option.id;
			// console.log(this.article_id, '9999999999999999');

		},
		mounted() {

		},
		methods: {
			doSome(data) {

				// 接收子组件传递过来的数据
				this.receivedData = data;
				console.log('子组件传值', this.receivedData);
			},
			async send(article_id, remark_id = 0) {
				console.log(this.receivedData,'--------------------+');
				if (this.receivedData.id) {
					remark_id = this.receivedData.id
					
				}
				console.log(remark_id,'------------+');
				if (this.content.trim() !== '') {
					const res = await publish({
						'article_id': article_id,
						'remark_id': remark_id,
						'content': this.content
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '评论成功',
								icon: 'success',
								duration: 1500
							});
							this.content = ''
							this.commentKey += 1
						}

					});
				} else {
					uni.showToast({
						title: '评论不可能为空',
						icon: 'error',
						duration: 1500
					});
				}
			},
			formatTimestamp(timestamp) {
				const currentTime = moment();
				const articleTime = moment.unix(timestamp);

				const timeDifference = currentTime.diff(articleTime, 'seconds');
				const minutes = Math.floor(timeDifference / 60);
				const hours = Math.floor(timeDifference / 3600);
				const days = Math.floor(timeDifference / (3600 * 24));
				const weeks = Math.floor(timeDifference / (3600 * 24 * 7));

				if (weeks >= 1) {
					return articleTime.format('YYYY-MM-DD HH:mm');
				} else if (days >= 2) {
					return `${days}天前`;
				} else if (days === 1) {
					return '昨天';
				} else if (hours >= 1) {
					return `${hours}小时前`;
				} else if (minutes >= 1) {
					return `${minutes}分钟前`;
				} else {
					return '刚刚';
				}
			},
			pictureArray(list) {
				const array = list.split(",")
				const completeArray = array.map(path => IMG_URL + path)

				return completeArray;
			},
			back() {
				uni.navigateBack({
					delta: 1,
					fail(e) {
						// console.log(e, '------------');
					}
				})
			},
			// 获取详情数据
			async getdetail(article_id) {

				const res = await detail({
					'article_id': article_id
				}).then(res => {
					// console.log(res, '内容详情');
					this.article = res.data
				});
			},
			//关注某人
			async interest(user_id) {
				const res = await interestOne({
					'user_id': user_id
				}).then(res => {
					// console.log(res, '关注某人');
					if (res.code == 1) {
						this.article.is_interest = 1
					} else {
						uni.showToast({
							'duration': 1500,
							'icon': 'none',
							'title': res.msg
						})
					}

				});
			},
			//取消关注某人
			async cancelInterestOne(user_id) {
				const res = await cancelInterest({
					'user_id': user_id
				}).then(res => {
					// console.log(res, '取消关注某人');
					this.article.is_interest = 0
				});
			},
			//点赞
			async likeOne(article_id) {
				const res = await like({
					'article_id': article_id
				}).then(res => {
					// console.log(res, '点赞');
					if (res.code == 1) {
						this.article.is_like = 1
					}

				});
			},
			//取消点赞
			async cancelLikeOne(article_id) {
				const res = await cancelLike({
					'article_id': article_id
				}).then(res => {
					// console.log(res, '取消点赞');
					if (res.code == 1) {
						this.article.is_like = 0
					}

				});
			},
			//收藏
			async collectOne(article_id) {
				const res = await collect({
					'article_id': article_id
				}).then(res => {
					// console.log(res, '收藏');
					if (res.code == 1) {
						this.article.is_collect = 1
					}

				});
			},
			//取消收藏
			async cancelCollectOne(article_id) {
				const res = await cancelCollect({
					'article_id': article_id
				}).then(res => {
					// console.log(res, '取消收藏');
					if (res.code == 1) {
						this.article.is_collect = 0
					}

				});
			},
			//踩
			async stepArticleOne(article_id) {
				const res = await stepArticle({
					'article_id': article_id
				}).then(res => {
					console.log(res, '踩');
					if (res.code == 1) {
						this.article.is_step = 1
					}

				});
			},
			//取消踩
			async cancelStepArticleOne(article_id) {
				const res = await cancelStepArticle({
					'article_id': article_id
				}).then(res => {
					console.log(res, '取消踩');
					if (res.code == 1) {
						this.article.is_step = 0
					}

				});
			},

		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.content {
		.box {
			padding: 32rpx 30rpx 12rpx 24rpx;
			padding-top: 88rpx;

			.imgicon {
				width: 40rpx;
			}

			text {
				font-weight: bold;
				font-size: 34rpx;
				color: #252525;
				display: inline-block;
				margin-left: 12rpx;
			}
		}

		.wrap {
			padding: 0 10rpx;

			.gz {
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 1px solid rgba(0, 0, 0, 0.13);
				padding: 23rpx 20rpx;
				margin-top: 20rpx;

				.txts {
					font-weight: bold;
					font-size: 30rpx;
					color: $uni-text-color;
					padding-left: 20rpx;
				}

				.tags {
					width: 125rpx;
					height: 53rpx;
					line-height: 53rpx;
					text-align: center;
					background: #FFF;
					border-radius: 26rpx;
					border: 1px solid $uni-text-color-inverse;
					font-size: 24rpx;
					color: $uni-text-color-inverse;
				}

				.title {
					font-weight: bold;
					font-size: 36rpx;
					line-height: 48rpx;
					color: $uni-text-color;
				}

				.tag {
					font-size: 20rpx;
					color: $uni-text-color-placeholder;
					border-radius: 10rpx;
					border: 1px solid #DDDDDD;
					padding: 4rpx 8rpx;
					margin: 22rpx 12rpx 30rpx 0;
				}

				.desc {
					font-size: 30rpx;
					color: $uni-text-color;
					line-height: 50rpx;
					padding: 20rpx;
				}

				.editime {
					padding: 28rpx 0;
					border-bottom: 1px solid #EEE;
					font-size: 24rpx;
					color: $uni-text-color-placeholder;
					line-height: 50rpx;

					&>text {
						display: inline-block;
						margin-right: 18rpx;
					}
				}

				.swiper {
					z-index: 1;
				}
			}

			.indicator {
				display: flex;
				flex-direction: row;
				justify-content: center;

				&__dot {
					height: 12rpx;
					width: 12rpx;
					border-radius: 100rpx;
					background-color: #CBCBCC;
					margin: 0 10rpx;
					transition: background-color 0.3s;

					&--active {
						background-color: #f00;
					}
				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: env(safe-area-inset-bottom);
			height: 120rpx;
			background: #fff;
			border-top: 1px solid #EEE;
			padding: 10rpx 30rpx;

			.inputWrap {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 400rpx;
				flex-shrink: 0;
			}

			.imgWrap {
				image {
					width: 48rpx;
					margin-left: 22rpx;
				}
			}
		}
	}
</style>